<template>
  <div class="detail" v-if="detailInfo.nm">
    <MyLogo />
    <div
      class="movie-info"
      :style="{
        backgroundColor: detailInfo.backgroundColor,
      }"
    >
      <div class="crumbs-nav">
        <a href="#">猫眼电影</a> <b>></b>&nbsp;
        <span>{{ detailInfo.nm }}</span>
      </div>

      <div class="movie-box">
        <img :src="detailInfo.img | format" alt="" />
        <div class="movie-desc">
          <div class="movie-desc-top">
            <h2>{{ detailInfo.nm }}</h2>
            <h4>{{ detailInfo.enm }}</h4>
            <div class="movie-type">
              <span>{{ detailInfo.cat }}</span>
              <img
                src="../assets/images/movie-tag-2DIMAX.png"
                v-if="detailInfo.ver === '2D'"
              />
              <img
                src="../assets/images/movie-tag-3DIMAX.png"
                v-if="detailInfo.ver === '3D'"
              />
            </div>
            <div class="actors">{{ detailInfo.star }}</div>
            <div class="movie-show-time">
              {{ detailInfo.pubDesc }} / {{ detailInfo.dur }}分钟
            </div>
          </div>
          <div class="btns">
            <div class="xiangkan">
              <img src="../assets/images/want-to-watch.png" alt="" />
              <span>想看</span>
            </div>
            <div class="xiangkan">
              <img src="../assets/images/star.png" alt="" />
              <span>看过</span>
            </div>
          </div>
        </div>
      </div>

      <div class="real-time">
        <div class="retop">
          <div class="retop-one">
            <img src="../assets/images/logo-new.png" alt="" />
            <span>猫眼购票评分</span>
          </div>
          <div class="retop-two">
            <span>{{ detailInfo.wish }} 人想看</span>
            <span>{{ detailInfo.watched }} 人看过 <b>> </b></span>
          </div>
        </div>
        <div class="remiddle">
          <div class="left">
            <div>{{ detailInfo.sc }}</div>
            <div>{{ detailInfo.snum }} 人评</div>
          </div>
          <div class="right">
            <div class="stars-percent-bar">
              <div class="stars">
                <img src="../assets/images/white-star.png" alt="" />
                <img src="../assets/images/white-star.png" alt="" />
                <img src="../assets/images/white-star.png" alt="" />
                <img src="../assets/images/white-star.png" alt="" />
                <img src="../assets/images/white-star.png" alt="" />
              </div>
              <div class="bar">
                <div class="percent"></div>
              </div>
            </div>
            <div class="stars-percent-bar">
              <div class="stars">
                <img src="../assets/images/grey-star.png" alt="" />
                <img src="../assets/images/white-star.png" alt="" />
                <img src="../assets/images/white-star.png" alt="" />
                <img src="../assets/images/white-star.png" alt="" />
                <img src="../assets/images/white-star.png" alt="" />
              </div>
              <div class="bar">
                <div class="percent"></div>
              </div>
            </div>
            <div class="stars-percent-bar">
              <div class="stars">
                <img src="../assets/images/grey-star.png" alt="" />
                <img src="../assets/images/grey-star.png" alt="" />
                <img src="../assets/images/white-star.png" alt="" />
                <img src="../assets/images/white-star.png" alt="" />
                <img src="../assets/images/white-star.png" alt="" />
              </div>
              <div class="bar">
                <div class="percent"></div>
              </div>
            </div>
            <div class="stars-percent-bar">
              <div class="stars">
                <img src="../assets/images/grey-star.png" alt="" />
                <img src="../assets/images/grey-star.png" alt="" />
                <img src="../assets/images/grey-star.png" alt="" />
                <img src="../assets/images/white-star.png" alt="" />
                <img src="../assets/images/white-star.png" alt="" />
              </div>
              <div class="bar">
                <div class="percent"></div>
              </div>
            </div>
            <div class="stars-percent-bar">
              <div class="stars">
                <img src="../assets/images/grey-star.png" alt="" />
                <img src="../assets/images/grey-star.png" alt="" />
                <img src="../assets/images/grey-star.png" alt="" />
                <img src="../assets/images/grey-star.png" alt="" />
                <img src="../assets/images/white-star.png" alt="" />
              </div>
              <div class="bar">
                <div class="percent"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="rebottom" v-if="detailInfo.scm">
          <img src="../assets/images/dianz.png" alt="" />
          {{ detailInfo.scm }}
        </div>
      </div>

      <div class="brief-introduction">
        <div class="title">
          <h3>简介</h3>
          <div class="open" v-show="show" @click="qie">
            <span>展开</span>
            <img src="../assets/images/arrow-right.png" alt="" />
          </div>
          <div class="close" v-show="!show" @click="qie">
            <span>收起</span>
            <img src="../assets/images/arrow-right.png" alt="" />
          </div>
        </div>
        <div class="content">
          <p class="ellipsis" v-show="flog">{{ detailInfo.dra }}</p>
          <p class="all" v-show="!flog">{{ detailInfo.dra }}</p>
        </div>
      </div>

      <div class="aphotos">
        <div class="atitle">
          <h3>剧照</h3>
          <div>
            <span>全部</span>
            <img src="../assets/images/arrow-right.png" alt="" />
          </div>
        </div>
        <div class="actor-list">
          <ul>
            <li v-for="item in detailInfo.photos" :key="item">
              <img :src="item | qhttp" alt="" />
            </li>
          </ul>
        </div>
      </div>

      <div class="videos">
        <div class="vtitle">
          <h3>视频推荐</h3>
          <div>
            <span>全部</span>
            <img src="../assets/images/arrow-right.png" alt="" />
          </div>
        </div>
        <div class="videos-list">
          <ul>
            <li v-for="item in detailInfo.photos" :key="item">
              <img :src="item | qhttp" alt="" />
              <div class="yuan">
                <div class="jiao"></div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div class="box-office">
      <div class="otitle">
        <h3>票房</h3>
        <div>
          <span>票房详情</span>
          <img src="../assets/images/arrow-right-black.png" alt="" />
        </div>
      </div>
      <div class="data-box">
        <div class="item">
          <div class="value">1</div>
          <div class="name">昨日排名</div>
        </div>
        <div class="item">
          <div class="value">24,022</div>
          <div class="name">首周票房(万)</div>
        </div>
        <div class="item">
          <div class="value">89,817</div>
          <div class="name">累计票房(万)</div>
        </div>
      </div>
    </div>

    <div class="related">
      <div class="rtitle">
        <h3>相关快讯</h3>
        <div>
          <span>全部</span>
          <img src="../assets/images/arrow-right-black.png" alt="" />
        </div>
      </div>
      <div class="informations">
        <a href="#">
          <div class="top">
            <span>{{ detailInfo.videoName }}</span>
            <img :src="detailInfo.videoImg" alt="" />
          </div>
          <div class="bottom">
            <div class="bot-left">
              <span>猫眼电影</span>
              <time>3天前</time>
            </div>
            <div class="bot-right">
              <img src="../assets/images/read-num.png" alt="" />
              <span>800</span>
              <img src="../assets/images/replying-comments.png" alt="" />
              <span>0</span>
            </div>
          </div>
        </a>
        <a href=""></a>
      </div>
      <div class="informations">
        <a href="#">
          <div class="top">
            <span>{{ detailInfo.videoName }}</span>
            <img :src="detailInfo.videoImg" alt="" />
          </div>
          <div class="bottom">
            <div class="bot-left">
              <span>猫眼电影</span>
              <time>3天前</time>
            </div>
            <div class="bot-right">
              <img src="../assets/images/read-num.png" alt="" />
              <span>800</span>
              <img src="../assets/images/replying-comments.png" alt="" />
              <span>0</span>
            </div>
          </div>
        </a>
        <a href=""></a>
      </div>
    </div>

    <div class="guess">
      <div class="rtitle">
        <h3>为你推荐</h3>
        <div>
          <span>全部</span>
          <img src="../assets/images/arrow-right-black.png" alt="" />
        </div>
      </div>
      <div></div>
    </div>

    <div class="bottom-logo">
      <img src="../assets/images/bottom-logo.png" alt="" />
    </div>
  </div>
</template>

<script>
import MyLogo from "@/components/home/MyLogo.vue";
import { detailApi } from "../utils/api";
export default {
  props: ["id"],
  data() {
    return {
      detailInfo: {},
      show: true,
      flog: true,
    };
  },
  components: {
    MyLogo,
  },
  mounted() {
    this.getData();
  },
  methods: {
    async getData() {
      const res = await detailApi({ id: this.id });
      console.log(res);
      if (res.status === 0) {
        this.detailInfo = res.result;
      }
    },
    // guess() {
    //   this.$router.push("/detail/1282401");
    // },
    qie() {
      this.show = !this.show;
      this.flog = !this.flog;
    },
  },
  filters: {
    format(val) {
      return val.split("w.h").join("100.138");
    },
    qhttp(val) {
      return val.split("w.h").join("140.94");
    },
  },
};
</script>

<style lang="less" scoped>
.movie-info {
  padding: 21px 16px 31px;
  color: #fff;
}
.crumbs-nav {
  margin-bottom: 15px;
  color: #ccc;
  font-size: 15px;
  line-height: 15px;
  font-family: Arial, Helvetica, sans-serif;
  a {
    color: #ccc;
  }
}
.movie-box {
  display: flex;
}
.movie-desc {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  margin-left: 12px;
}
.movie-desc-top {
  h2 {
    font-size: 20px;
    margin-bottom: 12px;
  }
  h4 {
    font-size: 12px;
    opacity: 0.6;
    height: 18px;
    line-height: 18px;
  }
}
.movie-type {
  display: flex;
  align-items: center;
  margin: 5px 0;
  span {
    font-size: 12px;
    opacity: 0.6;
    margin-right: 5px;
  }
  img {
    width: 40px;
    height: 14px;
    vertical-align: middle;
  }
}
.actors {
  font-size: 12px;
  opacity: 0.6;
  margin: 5px 0;
}
.movie-show-time {
  font-size: 12px;
  opacity: 0.6;
  margin: 5px 0;
}
.btns {
  display: flex;
  justify-content: space-between;
  .xiangkan {
    display: flex;
    justify-content: center;
    align-items: center;
    background: hsla(0, 0%, 100%, 0.35);
    box-shadow: 0 0.02rem 0.08rem 0 rgb(0 0 0 / 10%);
    border-radius: 4px;
    font-size: 14px;
    width: 110px;
    height: 30px;
    color: #fff;
    margin-right: 10px;
    cursor: pointer;
    img {
      width: 14px;
      height: 14px;
      margin-right: 8px;
    }
  }
}
.real-time {
  margin-top: 15px;
  padding: 10px;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  .retop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .retop-one {
      font-size: 12px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      font-weight: 400;
      img {
        width: 16px;
        height: 16px;
        margin-right: 4px;
      }
    }
    .retop-two {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      font-size: 12px;
      span {
        opacity: 0.6;
        margin-right: 12px;
      }
    }
  }
  .remiddle {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    padding: 12px 0 3px;
    .left {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-end;
      margin-right: 4px;
      > div:nth-child(1) {
        font-weight: 600;
        font-family: MaoYanHeiTi-H-H;
        font-size: 26px;
        color: #ffb400;
        line-height: 26px;
        letter-spacing: 0;
        text-align: center;
        margin-bottom: 4px;
      }
      > div:nth-child(2) {
        font-weight: 400;
        opacity: 0.6;
        font-family: PingFangSC-Regular;
        font-size: 10px;
        display: flex;
        word-break: keep-all;
        color: hsla(0, 0%, 100%, 0.4);
        text-align: center;
        line-height: 10px;
      }
    }
    .right {
      .stars-percent-bar {
        display: flex;
        align-items: center;
        margin-bottom: 3px;
        .stars {
          display: flex;
          justify-content: flex-end;
          align-items: center;
          width: 40px;
          img {
            height: 5px;
            width: 5px;
            margin-left: 2px;
            opacity: 0.4;
          }
        }
        .bar {
          width: 72px;
          height: 4px;
          background-color: hsla(0, 0%, 100%, 0.06);
          border-radius: 1px;
          margin-left: 4px;
        }
      }
    }
  }
  .rebottom {
    margin-top: 7px;
    background: rgba(0, 0, 0, 0.12);
    border-radius: 6px;
    padding: 0 10px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    min-width: 170px;
    height: 30px;
    line-height: 30px;
    font-size: 12px;
    color: #fffadf;
    display: flex;
    align-items: center;
    img {
      width: 15px;
      height: 15px;
      margin-right: 7px;
    }
  }
}
.brief-introduction {
  position: relative;
  padding: 16px 0 0;
  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    h3 {
      font-size: 16px;
      font-weight: 400;
    }
    > div {
      font-size: 12px;
      opacity: 0.6;
      color: #fff;
      width: 45px;
      position: absolute;
      right: 0;
      top: 20px;
      img {
        width: 5px;
        height: 8px;
        margin-left: 6px;
      }
    }
    .open {
      img {
        transform: rotate(90deg);
      }
    }
    .close {
      img {
        transform: rotate(-90deg);
      }
    }
  }
  .content {
    font-size: 15px;
    line-height: 28px;
    overflow: hidden;
    width: 338px;
    .ellipsis {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .all {
      word-wrap: break-word;
      word-break: break-all;
    }
  }
}
.aphotos {
  margin-top: 18px;
  .atitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    h3 {
      font-size: 15px;
      font-weight: 400;
    }
    span {
      font-size: 12px;
      opacity: 0.6;
    }
    img {
      width: 5px;
      height: 8px;
      margin-left: 6px;
    }
  }
  .actor-list {
    margin-top: 12px;
    ul {
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      overflow-x: scroll;
      li {
        flex-shrink: 0;
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-items: center;
        margin-left: 8px;
      }
    }
  }
}
.videos {
  margin-top: 18px;
  .vtitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    h3 {
      font-size: 15px;
      font-weight: 400;
    }
    span {
      font-size: 12px;
      opacity: 0.6;
    }
    img {
      width: 5px;
      height: 8px;
      margin-left: 6px;
    }
  }
  .videos-list {
    margin-top: 12px;
    ul {
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      overflow-x: scroll;
      li {
        flex-shrink: 0;
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-items: center;
        margin-left: 8px;
        position: relative;
        img {
          border-radius: 10px;
        }
        .yuan {
          position: absolute;
          top: 32px;
          left: 54px;
          box-sizing: border-box;
          width: 32px;
          height: 32px;
          background: hsla(0, 0%, 100%, 0.9);
          box-shadow: 0 0 0.04rem 0 rgb(0 0 0 / 30%);
          border-radius: 50%;
          .jiao {
            position: absolute;
            width: 0;
            height: 0;
            border-color: transparent transparent transparent #222;
            border-style: solid;
            border-width: 6px 9px;
            top: 10px;
            left: 13px;
          }
        }
      }
    }
  }
}
.box-office {
  margin-top: 12px;
  background-color: #fff;
  overflow: hidden;
  .otitle {
    height: 42px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    h3 {
      font-size: 15px;
      color: #333;
      font-weight: 400;
    }
    span {
      font-size: 12px;
      color: #999;
    }
    img {
      width: 5px;
      height: 8px;
      margin-left: 8px;
    }
  }
  .data-box {
    background-color: #f8f8f8;
    border-radius: 6px;
    margin: 0 15px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .item {
      flex-grow: 1;
      text-align: center;
      padding: 12px 0 11px;
      .value {
        font-size: 17px;
        color: #f03d37;
      }
      .name {
        font-size: 12px;
        color: #666;
        margin-top: 10px;
      }
    }
  }
}
.related {
  margin-top: 12px;
  background-color: #fff;
  overflow: hidden;
  .rtitle {
    height: 45px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    border-bottom: 1px solid #eee;
    h3 {
      font-size: 15px;
      color: #333;
      font-weight: 400;
    }
    span {
      font-size: 13px;
      color: #666;
      height: 100%;
      width: 42px;
    }
    img {
      width: 6px;
      height: 11px;
      margin-left: 4px;
    }
  }
  .informations {
    padding: 0 15px;
    .top {
      display: flex;
      justify-content: space-between;
      padding-top: 16px;
      span {
        font-size: 17px;
        color: #333;
        line-height: 24px;
        margin-right: 12px;
        display: block;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        text-overflow: ellipsis;
        word-wrap: break-word;
        word-break: break-all;
        overflow: hidden;
      }
      img {
        width: 110px;
        height: 78px;
        border-radius: 2px;
      }
    }
    .bottom {
      margin-top: 8px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      color: #999;
      padding-bottom: 16px;
      border-bottom: 1px solid #eee;
      .bot-left {
        margin-right: 10px;
        span {
          margin-right: 7px;
        }
      }
      .bot-right {
        > span:nth-of-type(1) {
          margin-right: 40px;
        }
        img {
          margin-right: 5px;
          width: 14px;
          height: 12px;
        }
      }
    }
  }
}
.guess {
  margin-top: 12px;
  background-color: #fff;
  overflow: hidden;
  .rtitle {
    height: 45px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    border-bottom: 1px solid #eee;
    h3 {
      font-size: 15px;
      color: #333;
      font-weight: 400;
    }
    span {
      font-size: 13px;
      color: #666;
      height: 100%;
      width: 42px;
    }
    img {
      width: 6px;
      height: 11px;
      margin-left: 4px;
    }
  }
}
.bottom-logo {
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 6px;
  img {
    height: 25px;
  }
}
</style>
